<template>
	<div @touchstart=start @touchend=end @touchmove=move class="oindex" :style="{height:wh+'px'}">
		<div :class="{active:tra}" class="container" :style="ostyle.gg">
			<firstpage :style="ostyle.p0" class="p0" :class="{oactive:page%4==0}"></firstpage>
			<secondpage :style="ostyle.p1" class="p1" :class="{oactive:page%4==1||(page%4==-3)}"></secondpage>
			<thirdpage :style="ostyle.p2" class="p2" :class="{oactive:page%4==2||(page%4==-2)}"></thirdpage>
			<fourthpage :style="ostyle.p3" class="p3" :class="{oactive:page%4==3||(page%4==-1)}"></fourthpage>
			<load @toback=toback :style="ostyle.p4" class="p4"></load>
			<div :style="ostyle.p5" class="p4"></div>
		</div>
		<buttona :p=p @toload=toload @after=after></buttona>
	</div>
</template>

<script>
	var cache={
		a:0.78
	}
	export default {
		name: 'index',
		data() {
			return {
				a: 0,
				p:{
					content:'立即体验',
					show:!0
				},
				ystart: 0,
				xstart: 0,
				ymove: 0,
				xmove: 0,
				wh: window.innerHeight,
				ww: window.innerWidth,
				marginTop: 0,
				marginStart: 0,
				tra: !1,
				canmove: !0,
				opage: 0,
				opagestart: 0,
				roty:0,
				rotz:0,
				rotzp:0,
				scale:0.78
			}
		},
		watch:{
			rotx(){
				var b=Math.abs(this.opage-parseInt(this.opage));
				var c=function(){
					if(b<0.5){
						return b;
					}else{
						return 1-b;
					}
				}();
				cache.a=0.78-c/2;
				this.ostyle.gg.transform='rotateX(' + this.rotx + 'deg) rotateY('+this.roty+'deg) rotateZ('+this.rotz+'deg) scale3d('+cache.a+','+cache.a+','+cache.a+')'
			}
		},
		computed: {
			rotx() {
				return this.opage * 90;
			},
			page(){
				return this.opage.toFixed(0);
			},
			ostyle() {
				var yy = {
					gg: {
						'height': this.wh + 'px',
						'transform': 'rotateX(' + this.rotx + 'deg) rotateY('+this.roty+'deg) rotateZ('+this.rotz+'deg) scale3d('+this.scale+','+this.scale+','+this.scale+')'
					},
					p0: {
						transform: 'rotateX(0deg) translateZ(' + this.wh / 2 + 'px)'
					},
					p1: {
						transform: 'rotateX(270deg) translateZ(' + (this.wh / 2) + 'px)'
					},
					p2: {
						transform: 'rotateX(180deg) translateZ(' + (this.wh / 2) + 'px)'
					},
					p3: {
						transform: 'rotateX(90deg) translateZ(' + (this.wh / 2) + 'px)'
					},
					p4:{
						transform: 'rotateY(90deg) rotateZ('+(-this.rotzp)+'deg) translateZ(' + (this.ww / 2) + 'px)'
					}
					//					,tran:{'transform-origin':(this.ww/2)+'px '+(this.wh/2)+'px '+(-this.wh/2)+'px'}
				}
				return yy;
			}
		},
		created() {
		},
		methods: {
			after() {
				var that = this;
				this.tra = !0;
				this.opage++;
				setTimeout(function() {
					that.tra = !1;
				}, 1000)
			},
			toback(e){
				this.p.content="立即体验";
				this.p.show=!0;
				this.scale=0.78;
				this.canmove=!0;
				if(this.page%4==0){
					this.roty+=90;
				}else if(this.page%4==1||(this.page%4==-3)){
					this.rotz-=90;
				}else if(this.page%4==2||(this.page%4==-2)){
					this.roty-=90;
				}else if(this.page%4==3||(this.page%4==-1)){
					this.rotz+=90;
				}
				
			},
			toload(e){
				if(this.canmove==!1){
					return;
				}
				this.canmove=!1;
				this.scale=0.84;
				this.p.content="立即下载";
				this.p.show=!1;
				if(this.page%4==0){//第一页点击
					this.roty-=90;
					this.rotzp=0;
				}else if(this.page%4==1||(this.page%4==-3)){//第二页点击
					this.rotzp=90;
					this.rotz+=90;
				}else if(this.page%4==2||(this.page%4==-2)){//第三页点击
					this.rotzp=180;
					this.roty+=90;
				}else if(this.page%4==3||(this.page%4==-1)){
					this.rotzp=270;
					this.rotz-=90;
				}
			},
			move(e) {
				if(this.canmove){
					this.ymove = this.ystart - e.touches[0].pageY;
					this.xmove = this.xmove - e.touches[0].pageX;
					if(Math.abs(parseFloat(this.ymove / 180))<=1){
						this.opage = this.opagestart + parseFloat(this.ymove / 180);
					}
				}
			},
			end() {
				if(this.canmove){
					this.tra=!1;
					this.opage = parseFloat(parseFloat(this.opage).toFixed(0));
				}
			},
			start(e) {
				if(this.canmove){
					this.tra=!0;
					this.opagestart = parseFloat(this.opage);
					this.ystart = e.touches[0].pageY;
					this.xstart = e.touches[0].pageX;
				}
			}
		}
	}
</script>

<style lang="less">
	.oindex {
		overflow: hidden;
		perspective: 1000px;
		.container {
			margin: auto;
			position: relative;
			transform-style: preserve-3d;
			transform-origin: 50% 50% 0;
			transition: .6s all;
			.p0 {
				transform-origin: 50% 50% 0;
			}
			.p1 {
				transform-origin: 50% 50% 0;
			}
			.p2 {
				transform-origin: 50% 50% 0;
			}
			.p3 {
				transform-origin: 50% 50% 0;
			}
			>div.oactive:not(.p4) {
				.title {
					margin-top: 10px;
					opacity: 1;
				}
				.container {
					opacity: 1;
				}
				.iphonepc {
					opacity: 1;
				}
				.carousalbox {
					padding-left: 0px;
					opacity: 1;
				}
			}
			>div:not(.p4) {
				padding-top: 30px;
				position: absolute;
				width: 100%;
				margin-top: 0;
				box-sizing: border-box;
				.title {
					transition: .5s all;
					transition-delay: .2s;
					opacity: 0;
					margin-top: 30px;
				}
				.iphonepc {
					transition: .5s all;
					transition-delay: .7s;
					opacity: 0;
				}
				.carousalbox {
					transition: .5s all;
					transition-delay: 1.2s;
					padding-left: 60px;
					opacity: 0;
				}
				.container {
					transition: .3s all;
					transition-delay: .7s;
					opacity: 0;
				}
			}
		}
		.container.active {
			transition:none;
		}
	}
</style>